<!doctype html>
<html>
<head>
	<meta charset="utf-8"><meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>艺考圈</title>
	<link rel="stylesheet" type="text/css" href="../../lib/css/skin.css"/>
</head>
<body>
<div id="root">
	<div class="app_warp">
		<span id="myphoto" class="left my" tapmode onclick="api.openWin({name:'user','url':'../user/user.html'})">
			<img id="myimg" src="../../lib/img/none.png" alt="">
		</span>
		<div class="app_main">
			<div id="home_swiper" class="clearfix">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img src="../../res/ad/swiper_init.png" alt="">
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>

			<div class="app_box">
				<div class="box_tit">
					<span class="name">
						艺考头条
					</span>
					<span class="more icon_in" tapmode onclick="api.openWin({name:'topnews',url:'topnews.html'})">
						更多
					</span>
				</div>
				<div class="box_cont padding_box">
					<ul id="home_top_news" class="list_item line_list clearfix"></ul>
				</div>
			</div>
			<div id="home_documnet_img" class="app_box" style="display: none;">
				<img src="" alt=""  tapmode onclick="api.openWin({name:'document_index',url:'../document/document_index.html'})">
			</div>
			<div class="app_box">
				<div class="box_tit">
					<span class="name">
						推荐公开课
					</span>
					<span class="more icon_in" tapmode onclick="viewTab(1)">
						更多
					</span>
				</div>
				<div class="box_cont">
					<ul id="home_classroom" class="list_item col2_list clearfix">

					</ul>
				</div>
			</div>
			<div class="app_box">
				<div class="box_tit">
					<span class="name">
						推荐机构
					</span>
					<span class="more icon_in" tapmode onclick="viewTab(3)">
						更多
					</span>
				</div>
				<div class="box_cont">
					<ul id="home_mechanism" class="list_item col2_list clearfix"></ul>
				</div>
			</div>
		</div>
	</div>
</div>

<script id="swiper_template" type="text/html">
	<%for(var i in data) {%>
		<div class="swiper-slide">
			<img class="imgcache rem18" src="<%:=img%>" data_src="<%:=data[i].cover%>" alt="" tapmode onclick="_$.getPage('<%:=data[i].link%>')">
		</div>
	<%}%>
</script>
<script id="home_top_news_template" type="text/html">
	<%for(var i in data) {%>
	<li>
		<img class="pic imgcache" src="<%:=img%>" data_src="<%:=data[i].cover%>" alt="" tapmode onclick="_$.getPage('<%:=data[i].href%>')">
		<span class="title" tapmode onclick="_$.getPage('<%:=data[i].href%>')">
			<%:=data[i].title%>
		</span>
		<span class="intro">
			<%:=data[i].author%> <%:=data[i].time%>
		</span>
	</li>
	<%}%>
</script>
<script id="home_classroom_template" type="text/html">
	<%for(var i in data) {%>
	<li tapmode onclick="_$.getView('class',<%:=data[i].id%>,this)">
		<img class="imgcache" src="<%:=img" data_src="<%:=data[i].cover%>" alt="">
		<span class="title">
			<%:=data[i].title%>
		</span>
		<span class="viewnum">
			<%:=data[i].viewnum%>
		</span>
	</li>
	<%}%>
</script>
<script id="home_mechanism_template" type="text/html">
	<%for(var i in data) {%>
	<li tapmode onclick="_$.getView('mechanism',<%:=data[i].id%>,this)">
		<img class="pic imgcache" src="<%:=img" data_src="<%:=data[i].cover%>" alt="">
		<span class="comname">
			<%:=data[i].name%>
		</span>
		<span class="intention">
			<%:=data[i].area%>
		</span>
		<span class="intro">
			<%:subStr=data[i].intro%>
		</span>
	</li>
	<%}%>
</script>

<script>
	var viewTab=function(index){
			api.execScript({
				name:'index',
				script: 'setFrameIndex(' + index + ',true)'
			})
		},
		appready = function () {

			$(function(){
				$('#myphoto').css({'margin': api.safeArea.top + 'px 0 0 0'});
				$('#root').css({'padding': '0'});
				var pageScroll = $('.app_main'),
					imgHeight = $('#home_swiper').height();
				pageScroll.scroll(function(){
					if(pageScroll.scrollTop()>imgHeight){
						$('#myphoto').fadeOut();
					}else {
						$('#myphoto').fadeIn();
					}
				})
			})

			//check loginStatusChange===true
			api.addEventListener({
				name: 'viewappear'
			}, function () {
				_$.db.get({
					call:function(data){
						$('#myimg').attr('src',data.avatar);
					}
				})
			});

			_$.db.get({
				key: 'know_banner',
				call: function (data) {
					$('#home_documnet_img img').attr('src',data);
					$('#home_documnet_img').fadeIn();
				}
			})

			_$.db.get({
				key: 'home_swiper',
				call: function (data) {
					_$.template('swiper_template', {'data': data}, function (html) {
						$('#home_swiper .swiper-wrapper').html(html);
						_$.imgCache.load(function(){
							var swiper = new Swiper('.swiper-container', {
								pagination: '.swiper-pagination',
								loop: true
							});
						});
					});
				}
			})

			_$.db.get({
				key:'home_top_news',
				call:function(data,img){
					_$.template('home_top_news_template',{'data':data,'img':img},function(html){
						$('#home_top_news').html(html);
						_$.imgCache.load();
					});
				}
			})

			_$.db.get({
				key:'home_classroom',
				call:function(data,img){
					_$.template('home_classroom_template',{'data':data,'img':img},function(html){
						$('#home_classroom').html(html);
						_$.imgCache.load();
					});
				}
			})

			_$.db.get({
				key:'home_mechanism',
				call:function(data,img){
					_$.template('home_mechanism_template',{'data':data,'img':img},function(html){
						$('#home_mechanism').html(html);
						_$.imgCache.load();
					});
				}
			});

		};
</script>
<script src="../../lib/js/config.js"></script>
<script src="../../lib/js/jquery.js"></script>
<script src="../../lib/js/swiper.js"></script>
<script src="../../lib/js/common.js"></script>
</body>
</html>